﻿@page "/components/alert"

<Pager Title="Alert"  Indicates="@(new[]{"Examples","Link Color","Additional content","Dismissing"})">
	<Demo Title="Examples">
		<Run>
			<Alert>A simple Primary alert</Alert>
			<Alert Color="Color.Secondary">A simple Secondary alert</Alert>
			<Alert Color="Color.Info">A simple Info alert</Alert>
			<Alert Color="Color.Success">A simple Success alert</Alert>
			<Alert Color="Color.Danger">A simple Danger alert</Alert>
			<Alert Color="Color.Warning">A simple Warning alert</Alert>
			<Alert Color="Color.Light">A simple Light alert</Alert>
			<Alert Color="Color.Dark">A simple Dark alert</Alert>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Alert>A simple Primary alert</Alert>
<Alert Color=""Color.Secondary"">A simple Secondary alert</Alert>
<Alert Color=""Color.Info"">A simple Info alert</Alert>
<Alert Color=""Color.Success"">A simple Success alert</Alert>
<Alert Color=""Color.Danger"">A simple Danger alert</Alert>
<Alert Color=""Color.Warning"">A simple Warning alert</Alert>
<Alert Color=""Color.Light"">A simple Light alert</Alert>
<Alert Color=""Color.Dark"">A simple Dark alert</Alert>
```
")
		</Code>
	</Demo>
		<Demo Title="Link Color">
			<Description>
				Use <code>AlertLink</code> in component to quickly provide matching colored links within any alert.
			</Description>
		<Run>
			<Alert>A simple Primary alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Secondary">A simple Secondary alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Info">A simple Info alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Success">A simple Success alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Danger">A simple Danger alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Warning">A simple Warning alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Light">A simple Light alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
			<Alert Color="Color.Dark">A simple Dark alert with <AlertLink href="#">an example link</AlertLink>.</Alert>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Alert>A simple Primary alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Secondary"">A simple Secondary alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Info"">A simple Info alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Success"">A simple Success alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Danger"">A simple Danger alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Warning"">A simple Warning alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Light"">A simple Light alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
<Alert Color=""Color.Dark"">A simple Dark alert with <AlertLink href=""#"">an example link</AlertLink>.</Alert>
```
")
		</Code>
	</Demo>
	<Demo Title="Additional content">
		<Description>
			Set <code>HeadContent</code> for heading style, so <code>ChildContent</code> must be set appearently for paragraph.
		</Description>
		<Run>
			<Alert Color="Color.Success">
				<HeadContent>Well Done!!!</HeadContent>
				<ChildContent>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
				</ChildContent>
			</Alert>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Alert Color=""Color.Success"">
	<HeadContent>Well Done!!!</HeadContent>
	<ChildContent>
		<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
		<hr>
		<p class=""mb-0"">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
	</ChildContent>
</Alert>
```
")
		</Code>
	</Demo>
	<Demo Title="Dismissing">
		<Description><code>Dismissible</code> to show a close button on right and will be removed from page after clicking.</Description>
		<Run>
			<Alert Color="Color.Warning" Dismissible><strong>Holy guacamole!</strong> You should check in on some of those fields below.</Alert>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Alert Color=""Color.Warning"" Dismissible>
	<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</Alert>
```
")
		</Code>
	</Demo>
</Pager>